<template>
    <div class="emoji_list">
        <!-- 😄 😆 😊 😃 😏 😍 😘 😚 😳 😌 😆 😁 😉 😜 😝 😀 😗 😙 😛 😴 😟 😦 😧 😮 😬 😕 😯 😑 😒 😅 😓 😥 😩 😔 😞
        😖 😨 😰 😣 😢 😭 😂 😲 😱😫 😠 😡 😤 😪 😋 😷 😎 😵 👿 😈 😐 😶 😇 👽 💛 💙 💜 ❤️ 💚 💔 💓 💗 💕 💞 💘
        💖 ✨ ⭐ 🌟 💫 💥 💥 💢 ❗ ❓ ❕ ❔ 💤 💨 💦 🎶 🎵 🔥 💩 💩 💩 👍 👍 👎 👎 👌 👊 👊 ✊ ✌️ 👋 ✋ ✋ 👐 ☝️ 👇 👈 👉 🙌 🙏 👆 👏
        💪 🤘 🖕 🏃 🏃 👫 👪 👬 👭 💃 👯 🙆‍♀️ 🙅 💁 🙋 👰‍♀️ 🙇 💑 💆 💇 💅 👦
        👧 👩 👨 👶 👵 👴 👲 👳‍♂️ 👷 👮 👼 👸 😺 😸 😻 😽 😼 🙀 😿 😹 😾 👹 👺 🙈 🙉 🙊 💂‍♂️ 💀
        🐾 👄 💋 💧 👂 👀 👃 👅 💌 👤 👥 💬 💭 -->
        <div v-for="(item, index) in emojiList" :key="index" class="emoji_box" @click="sendEmoji(item)">
            <span class="emospan">{{ item
            }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'emojiList',
    data() {
        return {
            emojiList: ['😄', '😆', '😊', '😃', '😏', '😍', '😘', '😚', '😳', '😌', '😆', '😁', '😉', '😜', '😝', '😀', '😗', '😙', '😛', '😴', '😟', '😦', '😧', '😮', '😬', '😕', '😯', '😑', '😒', '😅', '😓', '😥', '😩', '😔', '😞', '😖', '😨', '😰', '😣', '😢', '😭', '😂', '😲', '😱', '😫', '😠', '😡', '😤', '😪', '😋', '😷', '😎', '😵', '👿', '😈', '😐', '😶', '😇', '👽', '💛', '💙', '💜', '❤️', '💚', '💔', '💓', '💗', '💕', '💞', '💘', '💖', '✨', '⭐', '🌟', '💫', '💥', '💥', '💢', '❗', '❓', '❕', '❔', '💤', '💨', '💦', '🎶', '🎵', '🔥', '💩', '💩', '💩', '👍', '👍', '👎', '👎', '👌', '👊', '👊', '✊', '✌️', '👋', '✋', '✋', '👐', '☝️', '👇', '👈', '👉', '🙌', '🙏', '👆', '👏'],
        };
    },
    methods: {
        sendEmoji(emoji) {
            // 触发自定义事件 'emoji-selected'，并传递 emoji 数据
            this.$emit('emoji-selected', emoji);
        }
    }
}
</script>


<style lang="less">
.emoji_list {
    width: 100%;
    height: 100%;
    display: flex;
    max-width: 100%;
    flex-flow: row wrap;
    margin-bottom: 1%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.176);
    transition: max-height 0.35s ease-out;
    overflow-y: auto;
    overflow-x: hidden;

    .emoji_box {
        width: 30px;
        height: 30px;
        border: 1px solid #fff;

        .emospan {
            padding: 2px;
            font-size: 20px;
            font-weight: 700;
            cursor: pointer;
            color: #000;
            background-color: #dddddd
        }
    }
}
</style>